<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
  <link rel="stylesheet" href="./style.css" type="text/css" />
  <body>
    <div class="wrapper">
      <input type="radio" name="playPause" id="play" value="play" />
      <input
        type="radio"
        name="playPause"
        id="pause"
        value="pause"
        checked="checked"
      />
      <input
        type="radio"
        name="color"
        id="ruby"
        value="ruby"
        checked="checked"
      />
      <input type="radio" name="color" id="emerald" value="emerald" />
      <input type="radio" name="color" id="sapphire" value="sapphire" />
      <div id="bg"></div>
      <div id="scene"></div>
      <label for="play" id="playBtn" title="Play/Pause button"></label>
      <nav>
        <label for="pause" id="pauseBtn"></label>
        <label for="ruby" id="red">
          <div>
            <div></div>
          </div>
        </label>
        <label for="emerald" id="green">
          <div>
            <div></div>
          </div>
        </label>
        <label for="sapphire" id="blue">
          <div>
            <div></div>
          </div>
        </label>
      </nav>
    </div>
    <script src="./script.js" type="text/javascript"></script>
  </body>
</html>
